<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>Spring Boot WebSocket Chat Application</title>
  <link rel="stylesheet" href="/css/main.css"/>
</head>
<body background="maxresdefault.jpg"
      style="background-position: center; background-repeat: no-repeat; background-size: cover;">
<noscript>
  <h2>Sorry! Your browser doesn't support Javascript</h2>
</noscript>

<div id="username-page">
  <div class="username-page-container">
    <h1 class="title">Type your username</h1>
    <form id="usernameForm" name="usernameForm">
      <div class="form-group">
        <input type="text" id="name" placeholder="Username" autocomplete="off"
               class="form-control"/>
      </div>
      <div class="form-group">
        <button type="submit" class="accent username-submit">Welcome!</button>
      </div>
    </form>
  </div>
</div>

<div id="chat-page" class="hidden">
  <div class="chat-container">
    <div class="chat-header">
      <h2>Spring WebSocket Chat Demo</h2>
    </div>
    <div class="connecting">
      Connecting...
    </div>
    <ul id="messageArea">

    </ul>
    <form id="messageForm" name="messageForm" nameForm="messageForm">
      <div class="form-group">
        <div class="input-group clearfix">
          <input type="text" id="message" placeholder="Type a message..." autocomplete="off"
                 class="form-control"/>
          <button type="submit" class="primary">Send</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!--
got this error:
Uncaught Error: Incompatibile SockJS! Main site uses: "1.1.2",,the iframe: "1.0.0" '.
-->
<!--<script type="text/javascript" src="/webjars/sockjs-client/sockjs.min.js"></script>-->
<!--<script type="text/javascript" src="/webjars/stomp-websocket/stomp.min.js"></script>-->

<!--
Uncaught Error: Incompatibile SockJS! Main site uses: "1.1.4", the iframe: "1.0.0".
-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>&ndash;&gt;-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>-->


<!-- sockjs-client v1.6.0 -->
<!--<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.6.0/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>-->
<script src="/js/main.js"></script>
</body>
</html>
